<template>
	<div class="normal-wrapper">
		<Header :path="path" :title="title" />
		<div class="normal-content">
			<div class="tab-list">
				<div :class="{ 'list-item': true, active: clickIndex === item.value }" v-for="item in tabList" :key="item.id" @click="tabsClick(item)">{{ item.label }}</div>
			</div>
			<div class="switch-list">
				<div v-show="clickIndex === 1">
					<div class="switch-item" v-for="item in switchList1" :key="item.id">
						<i-switch size="large" v-model="item.value">
							<span slot="open">ON</span>
							<span slot="close">OFF</span>
						</i-switch>
						<div class="desc">
							<p>{{ item.title }}</p>
							<p>{{ item.desc }}</p>
						</div>
					</div>
				</div>
				<div v-show="clickIndex === 2">
					<div class="switch-item" v-for="item in switchList2" :key="item.id">
						<i-switch size="large" v-model="item.value">
							<span slot="open">ON</span>
							<span slot="close">OFF</span>
						</i-switch>
						<div class="desc">
							<p>{{ item.title }}</p>
							<p>{{ item.desc }}</p>
						</div>
					</div>
				</div>
				<div v-show="clickIndex === 3">
					<div class="switch-item" v-for="item in switchList3" :key="item.id">
						<i-switch :style="{ visibility: item.id === 11 ? 'unset' : 'hidden' }" size="large" v-model="item.value">
							<span slot="open">ON</span>
							<span slot="close">OFF</span>
						</i-switch>
						<div class="desc">
							<p>{{ item.title }}</p>
							<p>{{ item.desc }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Header from '../components/header'

export default {
	components: {
		Header
	},

	data() {
		return {
			path: '/control/normal',
			title: '常规设置',
			clickIndex: 1,
			tabList: [
				{ id: 11, label: '快速切换', value: 1 },
				{ id: 22, label: 'Windows设备', value: 2 },
				{ id: 33, label: '独显直连', value: 3 }
			],
			switchList1: [
				{ id: 11, title: 'Win键锁定', desc: '单击Off启用Win键，单击On禁用Win键', value: true },
				{ id: 22, title: '关闭OSD显示', desc: '关闭功能键的图片提示', value: true },
				{ id: 33, title: '数字键盘锁定', desc: '单击On以锁定数字键盘，单击Off以解锁数字键盘', value: true },
				{ id: 44, title: '功能键锁定', desc: '开启主要/辅助功能行分配的切换功能键锁定', value: true },
				{ id: 55, title: '触摸板切换键', desc: '开启或关闭触摸板切换键功能', value: true },
				{ id: 66, title: '关机下使用USB给电', desc: '可在关机或休眠状态下支持USB给电，但不支持所有手机机型充电', value: true },
				{ id: 77, title: '来电自动开机', desc: '开启开关后在关机状态下，由未充电状态改变为充电状态时自动开机(保持充电状态关机不会自动开机)', value: true }
			],
			switchList2: [
				{ id: 11, title: 'WIFI 开关', desc: '选择"打开"以启用 WIF，选择"关闭"以禁用 WIFI', value: true },
				{ id: 22, title: '蓝牙开关', desc: '选择“打开”以启用蓝牙，选择”关闭"禁用蓝牙', value: true },
				{ id: 33, title: '网络摄像头开关', desc: '选择“打开”以启用网络摄像头，选择“关闭”禁用网络摄像头', value: true },
				{ id: 33, title: '触摸板开关', desc: '选择"打开”以启用触摸板，选择"关闭”以禁用触摸板', value: true }
			],
			switchList3: [
				{ id: 11, title: '独显直连', desc: '屏蔽核显，从独显直接输出画面到屏幕(修改后重启生效)', value: true },
				{ id: 22, title: 'dGPU 状态', desc: '只要启用了 NVIDIA Optimus，就会显示专用 GPU 的当前状态。如果您没有主动使用 dGPU 并且没有任何外部显示器连接到 dGPU，则 dGPU 应该处于睡眠状态以节省电量并延长电池寿命。', value: true },
				{ id: 33, title: 'dGPU 已唤醒', desc: '', value: true }
			]
		}
	},

	methods: {
		tabsClick(item) {
			this.clickIndex = item.value
		}
	}
}
</script>

<style lang="less" scoped>
.normal-wrapper {
	background: var(--bg-color);
	padding: 2.5rem 3rem;

	.normal-content {
		.tab-list {
			display: flex;
			justify-content: space-around;
			border-bottom: 1px solid #ff9900;
			padding-bottom: 0.6rem;
			.list-item {
				cursor: pointer;
			}
			.active {
				font-weight: 600;
				color: #ff9900;
			}
		}
		.switch-list {
			padding-left: 10rem;
			margin-top: 2rem;
			max-height: 42rem;
			overflow-y: auto;
			.switch-item {
				display: flex;
				align-items: center;
				margin-bottom: 2rem;
				.desc {
					margin-left: 3rem;
					p:nth-child(2) {
						font-size: 1rem;
						color: #afafaf;
						max-width: 50rem;
						margin-top: 0.5rem;
					}
				}
			}
		}
	}
}
</style>
